<template>
    <div>
        <h1>DemoMixin0</h1>
        <el-link>{{ this.platform }}</el-link>
        <el-button @click="getPlatform">点我{{ this.platform }}</el-button>
        <el-button @click="sendEmit">发送事件</el-button>
        <span class="my-span" :style="{ '--color': myStyle.color }">哈哈哈</span>
    </div>
</template>

<script>

export default {
    name: 'demoMixin0',
    props: ['aaa'],
    components: {
    },
    data() {
        return {
            myStyle: {
                color: 1,
                color2: 'red',
            }
        }
    },
    created() {
    },
    mounted() {
        console.log(this.aaa)
        // setTimeout(() => {
        //     document.getElementsByTagName('body')[0].style.setProperty('--color', `${this.myStyle.color2}`);
        // }, 3000);
    },
    events: {
        'evt.test1'() {
            alert('执行evt.test1事件')
        }
    },
    methods: {
        getPlatform() {
            alert(this.platform)
        },
        say() {
            console.log('hello say')
        },
        sendEmit() {
            this.$nuxt.$emit('evt.test1')
        }

    },
}
</script> 

<style lang="scss" scoped>
.my-span {

    $color: var(--color);

    @if calc(var(--color)*1)==1 {
        background-color: red
    }

    @else {
        background-color: blue
    }

}

.my-span2 {
    background-color: var(--color2);
}
</style>
